<template>
  <div class="dockStep2">
    <div class="title" v-if="type === 'add'">
      {{$t('configLazyLoad.channel.wexinTip90')}}
    </div>
    <div class="step2form">
      <div class="item">
        <span class="label">{{$t('configLazyLoad.channel.wexinTip91')}}</span>
        <el-input v-model="url" disabled id="weChatDockUrl"></el-input>
        <span class="copy" @click="DockCopy('weChatDockUrl')">{{$t('public.copy')}}</span>
      </div>
      <div class="item">
        <span class="label">{{$t('configLazyLoad.channel.wexinTip92')}}</span>
        <el-input v-model="token" disabled id="weChatDockToken"></el-input>
        <span class="copy" @click="DockCopy('weChatDockToken')">{{$t('public.copy')}}</span>
      </div>
      <div class='tsContert'>
        {{$t('configLazyLoad.channel.wexinTip119')}}
      </div>
      <div class="item">
        <span class="label">{{$t('configLazyLoad.channel.wexinTip118')}}</span>
        <el-input v-model="ServiceName" disabled id="ServiceName"></el-input>
        <span class="copy" @click="DockCopy('ServiceName')">{{$t('public.copy')}}</span>
      </div>
    </div>
    <div class="footer">
      <el-button class="primary_btn" type="primary"  @click.stop="backPreviousStep()">{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard-js'
  export default {
    name: 'wechatDockStep2',
    data () {
      return {
        url: '',
        token: '',
        ServiceName:''
      }
    },
    props: ['_id', 'type'],
    methods: {
      DockCopy (type) {
        let self = this
        let copytext
        if (type === 'weChatDockUrl') {
          copytext = this.url
        } else if (type === 'weChatDockToken') {
          copytext = this.token
        } else if (type === 'ServiceName'){
          copytext = this.ServiceName

        }
        Clipboard.copy(copytext).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      backPreviousStep () {
        this.$emit('cancel')
      }
    },
    beforeMount () {
      this.$store.dispatch('GetWeChatDock', {_id: this._id}).then(req2 => {
        if (req2.success && req2.data) {
          this.url = req2.wechatUrl + '/' + req2.data.from
          this.token = req2.data.authorizer_access_token
          this.ServiceName = req2.wechatUrl
        }
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .dockStep2
    text-align center
    .title
      font-size 18px
      margin: 5px
    .step2form
      .item
        margin 10px auto
        .label
          width 150px
          display inline-block
          text-align left
        .el-input
          width 300px
        .copy
          margin 0 20px
          cursor pointer
          color $c-main
  .tsContert
    font-weight:900
    font-size:16px
</style>
